<template>
    <div>

        <div style="position: relative;height: 1vh;"></div>
        <div style="position: relative;height: 5vh;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items: center;">
            <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '1'" :key="index" plain
                type="primary" :icon="item.menuicon" @click="e_function_all(item.menuperms, item.menuRouter)">
                {{ item.menuName }}
            </el-button>
        </div>

        <div style="position: relative;height: 1vh;"></div>
        <div style="position: relative;width: 100%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items:flex-start;height: 75vh;overflow-y: scroll;">

            <el-table :data="list" row-key="menuId" :tree-props="{ children: 'menuList', hasChildren: 'hasChildren' }">
                <el-table-column prop="menuId" label="菜单id" width="100" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="menuName" label="菜单名/按钮名" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="menuRouter" label="菜单/按钮路由" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="状态" width="100" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.menuStatus == 0" type="info">禁用</el-tag>
                        <el-tag v-if="scope.row.menuStatus == 1" type="success">正常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="菜单类型" width="100" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.menuType == 0" type="danger" effect="dark">菜单</el-tag>
                        <el-tag v-if="scope.row.menuType == 1" type="info" effect="dark">一级按钮</el-tag>
                        <el-tag v-if="scope.row.menuType == 2" type="success" effect="dark">目录</el-tag>
                        <el-tag v-if="scope.row.menuType == 3" type="warning" effect="dark">二级按钮</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="menuperms" label="菜单标识/按钮方法" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="图标" width="50" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <i :class="scope.row.menuicon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="menu_creattime" label="创建时间" width="170" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="menu_updatetime" label="修改时间" width="170" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" :width="500" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '3'" :key="index"
                             type="text" :icon="item.menuicon" @click="e_function_all(item.menuperms, scope.row)">
                            {{ item.menuName }}
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>




        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form label-width="80px" :model="pojo" :rules="rules" ref="pojo">
                <el-form-item label="菜单id" prop="menuId">
                    <el-input v-model="pojo.menuId" disabled />
                </el-form-item>
                <el-form-item label="菜单名字" prop="menuName">
                    <el-input v-model="pojo.menuName" />
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <el-radio v-model="pojo.menuType" label="0">菜单</el-radio>
                    <el-radio v-model="pojo.menuType" label="1">一级按钮</el-radio>
                    <el-radio v-model="pojo.menuType" label="2">目录</el-radio>
                    <el-radio v-model="pojo.menuType" label="3">二级按钮</el-radio>
                </el-form-item>
                <el-form-item label="菜单路由" prop="menuRouter">
                    <el-input v-model="pojo.menuRouter" />
                </el-form-item>
                <el-form-item label="菜单状态" prop="menuStatus">
                    <el-select v-model="pojo.menuStatus" placeholder="请选择">
                        <el-option label="禁用" :value="0">
                        </el-option>
                        <el-option label="启用" :value="1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单图标" prop="menuicon">
                    <el-select v-model="pojo.menuicon" placeholder="请选择">
                        <el-option v-for="item in iconListxop" :key="item.value" :value="item.value">
                            <div>
                                <i :class="item.value"></i>
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单标识" prop="menuperms">
                    <el-input v-model="pojo.menuperms" />
                </el-form-item>
                <el-form-item label="父菜单ID" prop="parentId">
                    <el-input v-model="pojo.parentId" disabled />
                </el-form-item>
                <el-button type="primary" @click="handleSave('pojo')">保存</el-button>
                <el-button @click="dialogFormVisible = false">关闭</el-button>
            </el-form>
        </el-dialog>


    </div>
</template>
  
<script>

import axios from 'axios'
import MenuApi from '@/api/menuRequest'
import iconListx from '@/common/iconList.js'
export default {
    // 组件名称
    name: 'menusx',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {
            //存放查询的值
            list: [],
            //查询的map
            searchMap: {

            },
            //添加或修改的实体
            pojo: {
                menuId: null,
                menuName: null,
                menuRouter: null,
                menuStatus: 1,
                parentId: 0,
                menuType: '0',
                menuicon: null,
                menuperms: null,
            },
            //表单的验证
            rules: {
                menuName: [
                    { required: true, message: '请输入菜单名字', trigger: 'change' }
                ],
                menuType: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' }
                ],
            },
            dialogFormVisible: false,
            dialogFormVisibleTwo: false,
            //添加或修改的判断
            id: '',
            //是否限制了菜单的添加或修改
            menuTypeLock: [],
            //iconList
            iconListxop: [],
        }
    },
    // 计算属性
    computed: {
        //获取vuex的数据
        buttonMenu() {
            return this.$store.getters['operation/getButtonList'];
        },
    },
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        fetchData() {
            //编写一个方法请求后端的接口，把返回的数据赋值list
            MenuApi.selectList(this.searchMap).then(response => {
                //把返回的结果赋值模型        
                this.list = response.data.data;

            })
        },
        //动态按钮执行方法
        e_function_all(function_name, function_data) {
            this.menuTypeLock = [];
            //添加菜单或者目录
            if (function_name == 'handleEditMenu') {
                this.menuTypeLock = [0, 2];
                this.handleEdit('');
            }
            //修改菜单，目录，按钮
            if (function_name == 'updateMenu') {
                function_data.menuType = (Number)(function_data.menuType)
                if (function_data.menuType == 0 && function_data.menuList.length > 0) {
                    this.menuTypeLock = [0];
                } else if (function_data.menuType == 0 && function_data.menuList.length <= 0) {
                    this.menuTypeLock = [0, 2];
                } else if (function_data.menuType == 1 || function_data.menuType == 3) {
                    this.menuTypeLock = [1, 3];
                } else if (function_data.menuType == 2 && function_data.menuList.length <= 0) {
                    this.menuTypeLock = [0, 2];
                } else if (function_data.menuType == 2 && function_data.menuList.length > 0) {
                    this.menuTypeLock = [2];
                }
                this.handleEdit(function_data.menuId);
            }
            //删除菜单
            if (function_name == 'deleteMenu') {
                if (function_data.menuList.length > 0) {
                    this.$message({
                        message: '存在子菜单无法删除',
                        type: 'error'
                    })
                    throw new Error("存在子菜单")
                }
                this.handleDelete(function_data.menuId);
            }
            //添加子菜单或者目录或者按钮
            if (function_name == 'handleEditChildMenu') {
                function_data.menuType = (Number)(function_data.menuType);
                if (function_data.menuType == 0) {
                    this.menuTypeLock = [1, 3];
                } else if (function_data.menuType == 1 || function_data.menuType == 3) {
                    this.$message({
                        message: '按钮无法添加菜单',
                        type: 'error'
                    })
                    throw new Error("按钮无法添加菜单")
                } else if (function_data.menuType == 2) {
                    this.menuTypeLock = [0, 2];
                }
                this.handleEdit('');
                this.pojo.parentId = function_data.menuId;

            }
        },
        //新增和修改使用同一个函数打开弹窗，区别是新增没有id
        handleEdit(id) {
            this.id = id
            //打开弹窗
            this.dialogFormVisible = true
            if (id !== '') {
                //根据id查询数据绑定到模型上面
                MenuApi.selectByMenuId(id).then(reponse => {
                    this.pojo = reponse.data;
                    this.pojo.menuType = (String)(this.pojo.menuType);
                })
            } else {
                this.pojo = {
                    menuId: null,
                    menuName: null,
                    menuRouter: null,
                    menuStatus: 1,
                    parentId: 0,
                    menuType: '0',
                    menuicon: null,
                    menuperms: null,
                } //清空数据
            }
        },
        //新增和修改保存数据的方法
        handleSave(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.judgemenuIs(this.pojo.menuType) == false) {
                        this.$message({
                            message: '菜单类型错误',
                            type: 'error'
                        })
                        throw new Error('菜单类型错误')
                    }
                    if (this.id === null || this.id === '') {
                        MenuApi.insert(this.pojo).then(reponse => {
                            //重新加载列表数据
                            this.fetchData()
                            //关闭弹窗
                            this.dialogFormVisible = false
                        })
                    } else {
                        MenuApi.updateByMenuId(this.pojo).then(reponse => {
                            //重新加载列表数据
                            this.fetchData()
                            //关闭弹窗
                            this.dialogFormVisible = false
                        })
                    }
                } else {
                    this.$message({
                        message: '请输入数值',
                        type: 'error'
                    })
                    return false;
                }
            });

        },
        //新增或者删除时的菜单种类判定
        judgemenuIs(sta) {
            for (var i = 0; i < this.menuTypeLock.length; i++) {
                if (Number(sta) === this.menuTypeLock[i]) {
                    return true;
                }
            }
            return false;
        },
        //删除
        handleDelete(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                MenuApi.deleteByMenuId(id).then(reponse => {
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //导出Excel
        ExportExcel() {
            MenuApi.exportMenu().then(res => {
                const blob = new Blob([res.data], { type: "application/vnd.ms-excel" })
                const a = document.createElement("a")
                let fileName = '菜单信息' + '.xls'
                a.download = fileName;
                a.href = window.URL.createObjectURL(blob);
                a.click()
                a.remove()
            }).catch(
                error => {
                    if (error.response.status == 500) {
                        ElMessage.error({
                            message: '系统请求超时'
                        });
                    }
                }
            )
        },
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {
        //在创建vue实例后触发初始化钩子函数
        this.fetchData();
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {
        this.iconListxop = iconListx.iconList();
    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {

    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}
</script> 
  
  
<style scoped></style>
  